<script setup>

import {Aim, FullScreen, Refresh, Star} from "@element-plus/icons-vue";
import {useFullscreen} from "@vueuse/core";
import {useRepassword,useLogout} from "@/composables/useManager.js";
import FormDrawer from "@/components/FormDrawer.vue";

import {useUserInfoStore} from "@/stores/userInfo.js";


const store = useUserInfoStore();
const {
  //是否全屏状态
  isFullScreen,
  //切换全屏
  toggle
} = useFullscreen();

const {
    form,
    rules,
    formDrawerRef,
    formRef,
    onSubmit,

} = useRepassword()

const {
  handleLogout
} = useLogout()

const handleCommand = (c) => {
  switch (c) {
    case "logout":
      handleLogout();
          break
    case "rePassword":
      // showDrawer.value = true
        formDrawerRef.value.open()
          break
  }
}

//刷新
const handleRefresh = () => {location.reload()}










</script>

<template>
  <div class="f-header">
    <span class="logo">
      <el-icon class="mr-1"><Shop /></el-icon>
      VIPCODE
    </span>
    <el-icon class="icon-btn" @click="store.handleAsideWidth()">
      <fold v-if="store.asideWidth === '250px'"/>
      <Expand v-else/>
    </el-icon>
    <el-tooltip
        effect="dark"
        content="刷新"
        placement="bottom"
    >
      <el-icon class="icon-btn" @click="handleRefresh"><refresh /></el-icon>
    </el-tooltip>
    <div class="ml-auto flex items-center">
      <el-tooltip
          effect="dark"
          content="全屏"
          placement="bottom"
      >
        <el-icon class="icon-btn" @click="toggle">
          <FullScreen v-if="!isFullScreen" />
<!--          <Aim v-else/>-->
        </el-icon>
      </el-tooltip>
          <el-dropdown class="dropdown" @command="handleCommand">
            <span class="el-dropdown-link flex items-center text-light-50">
              <el-avatar class="mr-2" :size="25" :src="circleUrl" />
              <div v-if="store.user.length > 0">
                  {{ store.user[0].username }}
              </div>
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="rePassword">修改密码</el-dropdown-item>
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
          </el-dropdown>
    </div>
  </div>
<!--  <el-drawer v-model="showDrawer" title="修改密码" size="45%" :close-on-click-modal="false">-->
<!--    <el-form ref="formRef" :rules="rules" :model="form"  style="max-width: 600px" label-width="80px" size="small">-->
<!--      <el-form-item prop="oldpassword" label="旧密码">-->
<!--        <el-input  v-model="form.oldpassword" placeholder="请输入旧密码：">-->
<!--        </el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item prop="password" label="新密码">-->
<!--        <el-input v-model="form.password" placeholder="请输入密码：" type="password" show-password>-->
<!--        </el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item prop="repassword" label="确认密码">-->
<!--        <el-input v-model="form.repassword" placeholder="请输入确认密码：" type="password" show-password>-->
<!--        </el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button  type="primary" @click="onSubmit" :loading="loading">提交</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
<!--  </el-drawer>-->
      <form-drawer ref="formDrawerRef" title="修改密码" destroyOnClose @submit="onSubmit">
        <el-form ref="formRef" :rules="rules" :model="form"  style="max-width: 600px" label-width="80px" size="small">
                <el-form-item prop="oldpassword" label="旧密码">
                  <el-input  v-model="form.oldpassword" placeholder="请输入旧密码：">
                  </el-input>
                </el-form-item>
                <el-form-item prop="password" label="新密码">
                  <el-input v-model="form.password" placeholder="请输入密码：" type="password" show-password>
                  </el-input>
                </el-form-item>
                <el-form-item prop="repassword" label="确认密码">
                  <el-input v-model="form.repassword" placeholder="请输入确认密码：" type="password" show-password>
                  </el-input>
                </el-form-item>

        </el-form>
      </form-drawer>
</template>

<style scoped>

.f-header {
  @apply flex items-center bg-indigo-500 text-light-50 fixed top-0 left-0 right-0;
  height: 64px;
}

.logo {
  width:250px;
  @apply flex items-center justify-center text-xl;
}

.icon-btn {
  @apply flex items-center justify-center;
  width: 43px;
  height: 64px;
  cursor: pointer;
}

.icon-btn:hover {
  @apply bg-indigo-400;
}

.f-header .dropdown{
  height: 64px;
  cursor: pointer;
  @apply flex items-center justify-center mx-5;
}

</style>